<template>
  <div class="home">
    <router-view v-slot="{ Component, route }">
      <transition name="router-fade" mode="out-in">
        <component :is="Component" :key="route.matched?.[1]?.path" />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { watch, onMounted } from "vue";
import useUserStore from "@/store/modules/user";
import { setLocalCache } from "@/utils/cache";
import defaultConfig from "@/settings";
import useReceiveMainData from "@/hooks/microApp/useReceiveMainData";
import useCodeArrStore from "@/store/modules/select";
import { getOptionselect } from "@/apis/login";
const userStore = useUserStore();
const { receiveData } = useReceiveMainData();
const getCodeArr = () => {
  getOptionselect().then(res => {
    useCodeArrStore().setDict(res.data);
  });
};
onMounted(() => {
  getCodeArr();
});
watch(
  () => receiveData.value,
  newVal => {
    userStore.userInfo = newVal?.userInfo;
    setLocalCache(defaultConfig.tokenAttr, newVal?.token);
  }
);
</script>
<style scoped>
.el-dialog {
  padding: 24px 24px 40px !important;
  border-radius: 10px !important;
  .el-dialog__headerbtn {
    top: 10px !important;
  }
}
.el-dialog__header {
  .el-dialog__headerbtn .el-icon {
    font-size: 17px !important;
  }
}
</style>
<style scoped lang="scss">
@import "@/assets/styles/transition.css";
@import "@/assets/styles/element/el-dialog.scss";
.home {
  height: 100%;
  position: relative;
}
</style>
